<template>
    <div id="ContactListManage">
        <!-- 
                /**
                    id
                    contactName : 联系人姓名
                    mobile : 联系电话
                    post : 职务
            */
         -->
        <el-row  style="margin-bottom: 20px;">
            <el-col :span="4">
                <el-button type="primary" @click="dialogVisible = true">新增联系人</el-button>
            </el-col>
        </el-row>
        <el-table :data="dataSource" border style="width:100%">
            <el-table-column prop="contactName" label="联系人姓名"></el-table-column>
            <el-table-column prop="mobile" label="联系电话"></el-table-column>
            <el-table-column prop="post" label="职务"></el-table-column>
            <el-table-column  label="操作">
                   <template slot-scope="scope">
                    <el-button
                    size="mini"
                    @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button
                    size="mini"
                    type="danger"
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>       
            </el-table-column>
        </el-table>
        <el-dialog 
            title="新增联系人"
            :visible.sync="dialogVisible"
            width="30%"
            :before-close="handleClose"
        >
            <table class="table">
                <tbody>
                    <tr>
                        <td>联系人姓名
                        </td>
                        <td>
                            <el-input v-model="form.contactName" style="width:70%"></el-input>
                        </td>
                    </tr>
                    <tr>
                        <td>联系电话
                        </td>
                        <td>
                            <el-input v-model="form.mobile" style="width:70%"></el-input>
                        </td>
                    </tr>
                     <tr>
                        <td>职务
                        </td>
                        <td>
                            <el-input v-model="form.post" style="width:70%"></el-input>
                        </td>
                    </tr>
                </tbody>
            </table>
             <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="addNewContact">确 定</el-button>
            </span>
        </el-dialog>
    </div>
</template>
<script>
/*
    contactName : 联系人姓名
    mobile : 联系电话
    post 
*/ 
export default {
    data(){
        return {
             dataSource: [],
             dialogVisible: false,
             form: {

             }
        }
    },
    methods: {
        handleDelete(index,row){
            // /backstage/school/delete
            var deleteURL = window.baseURL+ "/backstage/contact/delete";
            var postData = {id: row.id,token: this.$token};
            this.$http.post(deleteURL,this.$qs.stringify(postData))
            .then((response)=>{
                this.loadData(1);
            })
            .catch((error)=>{
            })
        },
        handleEdit(index,row){

        },
        currentChange(value){
            this.loadData(value);
        },
        handleClose(){
            this.dialogVisible = false;
        },
        addNewContact(){
            //新增校园 /backstage/school/insert
            this.dialogVisible = false;
            var insertURL = window.baseURL + "/backstage/contact/insert";
            this.form.token = this.$token;
            this.$http.post(insertURL,this.$qs.stringify(this.form))
            .then((response)=>{
                this.loadData(1);
            })
            .catch((error)=>{
            })
        },
        loadData(pageNum){
            //url  /backstage/classStudent/findByPage
            var studentURL = window.baseURL+"/backstage/contact/findByPage?token="+this.$token+"&pageNum="+pageNum+"&pageSize=20";
            this.$http.get(studentURL)
            .then((response)=>{
                this.dataSource = response.data.data.list.results;
            })
            .catch((error)=>{
            })
        }
    },
    created(){
        this.loadData(1);
    }
}
</script>

<style lang="scss" scoped>
    #ContactListManage {
        width: 100%;
        padding: 40px;
        box-sizing: border-box; 
        position: absolute;   
        table {
            tr {
                td{
                    border: none;
                    &:nth-child(2n-1){
                        text-align: center;
                        vertical-align: middle;
                    }
                }
               
            }
        }    
    }
</style>
